Crear y utilizar librerias

Como crear una librería con código nativo y usarla posteriormente en un nuevo proyecto.

Crear librería

• Ejecutamos el siguiente comando para crear un scafolding básico de una librería:
npx create-react-native-library mi-libreria
• El comando se ejecuta de manera interactiva, se nos preguntan una serie de datos básicos de la libreria:

• Entramos en la carpeta del paquete e instalamos todas las dependencias:
cd mi-libreria yarn
• Añadir nuestro código a la librería, definimos las funciones java en "android/src/main/java/com/reactnativemilibreria" y a mayores tenemos que exportar las funciones en el archivo "src/index.tsx"

En este caso simplemente usaremos un toast para mostrar un mensaje por pantalla.

MiLibreriaModule.java:

import android.content.Context;
import android.widget.Toast;

@ReactMethod
public void show(String text) {
    Context context = getReactApplicationContext();
    Toast.makeText(context, text, Toast.LENGTH_LONG).show();
}

index.tsx:

export function show(text: string): Promise<number> {
  return MiLibreria.show(text);
}

En esta parte tendríamos que cambiar MiLibreria por el nombre de nuestra librería:


• Empaquetamos la librería (creamos un tarball) usando el siguiente comando:
npm pack

Una vez finaliza la ejecución se genera un archivo .tgz dentro de la carpeta (react-native-mi-libreria-0.1.0.tgz en este caso), mas adelante podremos usar este archivo para importar la librería en otros proyectos.

Utilizar librería

• Creamos un nuevo proyecto de React-Native:
npx react-native init EjemploUsoLibreria
• Instalar nuestra librería:

En nuestro caso instalamos la librería desde nuestro tarball que hemos creado previamente indicando el archivo con el siguiente comando:

cd EjemploUsoLibreria npm install ..\mi-libreria\react-native-mi-libreria-0.1.0.tgz

Si tenemos nuestra librería en un repositorio podriamos instalarlo con el siguiente comando:

npm install react-native-mi-libreria
• Configuramos el archivo metro.config.js añadiendo las siguientes lineas:

const path = require('path');
const root = path.resolve(__dirname, 'node_modules/react-native-mi-libreria'); 

projectRoot: __dirname,
watchFolders: [root],


• Añadir código para utilizar funciones de la libreria:

import React from 'react';
import {
  Button,
  View,
} from 'react-native';
import { multiply, show } from 'react-native-mi-libreria';

const App = () => {
  return (
    <View style={{padding: 10}}>
      <Button
        title="Press me"
        onPress={() => show('Simple Button pressed')}
      />
    </View>
  );
}

export default App;

• Ejecutamos la App con el siguiente comando:
npx react-native run-android

Y verificamos que todo funciona correctamente:

React Native | Java | Native Modules | libreria